<template>
  <div class="margin-container-list">
    <!-- 操作区域 -->
    <div class="top-operate clearfix">
      <div class="float-r">
        <el-input @keyup.enter.native="handleSearch" v-model="keyword" placeholder="请输入搜索关键字"
                  style="width: 300px"></el-input>
        <el-select v-model="keywordType" placeholder="请选择">
          <el-option v-for="item in keywordTypes" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="starEndTime"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待托管" name="1"></el-tab-pane>
      <el-tab-pane label="已支付" name="2"></el-tab-pane>
    </el-tabs>
    <div class="table-container">
      <el-table :data="shareCommissionList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column width="135px" label="分发编码" prop="contentCode">
        </el-table-column>
        <el-table-column width="135px" label="分发名称" prop="contentName">
        </el-table-column>
        <el-table-column width="135px" label="分发酬金" prop="amount">
        </el-table-column>
        <el-table-column width="135px" label="目标阅读量" prop="targetReading">
        </el-table-column>
        <el-table-column width="135px" label="支付状态">
          <template slot-scope="scope">
            {{ paymentStatuss[scope.row.paymentStatus] }}
          </template>
        </el-table-column>
        <el-table-column width="200px" label="时间">
          <template slot-scope="scope">
            <template v-if="activeName == '1'">
              {{ scope.row.createTime }}
            </template>
            <template v-else>
              {{ scope.row.createTime }}
            </template>
          </template>
        </el-table-column>
        <el-table-column min-width="260px" label="操作">
          <template slot-scope="scope">
            <template v-if="scope.row.paymentStatus == '1'">
              <el-button type="primary" size="mini" @click="handleLayer(scope.row)">打款</el-button>
            </template>
            <el-button type="primary" size="mini" @click="handleDetails(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="shareCommissionListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="shareCommissionListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 打款弹窗 -->
    <el-dialog :title="financeTitle" :visible.sync="financeVisible" :close-on-press-escape="true" width="650px">
      <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-10">
        <el-form-item label="任务酬金：" prop="amount">
          <span class="font-red font-18">{{ amount }}</span>
        </el-form-item>
        <el-form-item label="手续费：" prop="amount">
          <span class="font-red font-18">{{ chargeAmount }}</span>
        </el-form-item>
        <el-form-item label="支付方式：" prop="paymentType">
            <div class="radio-bar">
              <el-radio-group v-model="form.paymentType" @change="paymentTypeChange(form.paymentType)">
                  <div v-for="type in paymentTypes" class="mar-b-10">
                      <el-radio :label="type.key">
                        <div class="radio-border">
                          <svg-icon :class="type.icon" :icon-class="type.icon" />
                          <span class="radio-txt">{{type.value}}</span>
                        </div>
                      </el-radio>
                  </div>
              </el-radio-group>
            </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="financeVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPayment">确认打款</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="qrCodeVisible" width="12%">
      <img :src="qrCodeUrl" style="width: 200px; height: 200px" />
    </el-dialog>
  </div>
</template>

<style scoped>
.svg-icon{
  margin-right: 6px;

}
.wechatRadius{
  font-size: 26px;
}
.alipay{
  font-size: 60px;
  height: 30px;
}
.radio-txt{
  vertical-align: top;
  display: inline-block;
  padding-top: 6px;
}
.radio-border{
  border:#ccc 1px solid;
  vertical-align: middle;
  display: inline-block;
  padding: 5px 10px;
  width: 150px;
  height: 40px;
}
</style>

<script>
  import { pagingShareCommission, paymentAppendScan, checkPayment } from '@/api/content/shareCommission'
  import QRCode from 'qrcode'

  export default {
    data() {
      return {
        shareCommissionList: [],
        paymentStatuss: [],
        starEndTime: [],
        paymentStatus: '',
        taskCommissionStatus: true,
        taskCommissionId: '',
        activeName: '1',
        amount: 0,
        chargeAmount: 0,
        total: null,
        listLoading: true,
        keyword: '',
        keywordType: 'contentName',
        keywordTypeOld: '',
        multipleSelection: [],
        keywordTypes: [{
          value: 'contentName',
          label: '分发名称'
        }],
        shareCommissionListQuery: {
          currentPage: 1,
          size: 10,
          startDate: null,
          endDate: null,
          enterpriseId: this.getEnterpriseId(),
          paymentStatus: '',
          contentName: null
        },
        financeVisible: false,
        qrCodeVisible: false,
        qrCodeUrl: '',
        financeTitle: null,
        shareCommission: {
          shareCommissionId: '',
          contentId: ''
        },
        form: {
          amount: '',
          remunerationType: '1',
          paymentType: '33'
        },
        rules: {
          amount: [
            { required: true, message: '分发酬金', trigger: 'blur' }
          ],
          remunerationType: [
            { required: true, message: '支付方式', trigger: 'blur' }
          ]
        },
        paymentTypes: [
          { key: '33', value: '微信支付', icon: 'wechatRadius' },
          { key: '43', value: '支付宝', icon: 'alipay' }
        ]
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.initShareCommissionList()
    },
    methods: {
      initShareCommissionList() {
        this.shareCommissionList = []
        this.listLoading = true
        this.shareCommissionListQuery.paymentStatus = this.activeName
        pagingShareCommission(this.shareCommissionListQuery).then(response => {
          if (response.isError) return
          this.shareCommissionList = response.data.records
          if (response.data.dict) {
            this.paymentStatuss = response.data.dict.paymentStatus
          }
          this.total = response.total
          this.listLoading = false
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.shareCommissionListQuery.ascs = 'createTime'
            this.shareCommissionListQuery.descs = ''
          } else {
            this.shareCommissionListQuery.ascs = ''
            this.shareCommissionListQuery.descs = 'createTime'
          }
        }
        this.initShareCommissionList()
      },
      handleClick() {
        this.initShareCommissionList()
      },
      handleSearch() {
        this.searchReset()
        this.shareCommissionListQuery.currentPage = 1
        if (this.starEndTime) {
          if (this.starEndTime.length > 0) {
            this.shareCommissionListQuery.startDate = this.starEndTime[0]
            this.shareCommissionListQuery.endDate = this.starEndTime[1]
          }
        }
        if (this.keyword !== '') {
          this.shareCommissionListQuery.contentName = this.keyword
        }
        this.initShareCommissionList()
      },
      searchReset() {
        this.shareCommissionListQuery = {
          currentPage: 1,
          size: 10,
          startDate: null,
          endDate: null,
          enterpriseId: this.getEnterpriseId(),
          paymentStatus: '',
          contentName: null
        }
      },
      handleSizeChange(val) {
        this.shareCommissionListQuery.size = val
        this.initShareCommissionList()
      },
      handleCurrentChange(val) {
        this.shareCommissionListQuery.currentPage = val
        this.initShareCommissionList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 详情
      handleDetails(row) {
        this.$router.push({ path: '/finance/task-commission/detail/index', query: { taskId: row.taskId, taskType: row.taskType, taskStatus: row.taskStatus }})
      },
      // 打款
      handleLayer(row) {
        // 打款弹窗页面,设置任务详情为当前行数据
        this.shareCommission = { ...row }
        this.shareCommission.shareCommissionId = row.shareCommissionId
        this.shareCommission.contentName = row.contentName
        this.amount = row.amount
        this.chargeAmount = row.chargeAmount
        this.financeVisible = true
        this.financeTitle = '全额托管酬金后，再点击【确认打款】按钮后微客将额外收到您支付的酬金款项'
      },
      // 确认打款
      confirmPayment() {
        // 分发打款
        this.shareCommission.paymentType = this.form.paymentType
        const that = this
        paymentAppendScan({
          shareCommissionId: this.shareCommission.shareCommissionId,
          contentName: this.shareCommission.contentName,
          payType: this.shareCommission.paymentType
        }).then(response => {
          if (response.isError) return
          QRCode.toDataURL(response.data.resultData)
            .then(url => {
              that.qrCodeUrl = url
              that.qrCodeVisible = true
              that.handlePayByQRCode(that.shareCommission.shareCommissionId)
            })
            .catch(err => {
              console.error(err)
            })
          this.financeVisible = false
        })
      },
      // 扫码支付检测后台是否支付成功
      handlePayByQRCode(id) {
        const that = this
        setTimeout(() => {
          checkPayment(id).then(response => {
            if (response.isError) return
            if (response.data === 1) {
              // 已支付，刷新页面
              that.qrCodeVisible = false
              that.initShareCommissionList()
            } else {
              that.handlePayByQRCode(id)
            }
          })
        }, 5000)
      },
      // 更新任务状态
      handleUpdateStatus(row) {
      },
      // 更新支付方式
      paymentTypeChange(paymentType) {
      }
    },
    mounted() {
    }
  }
</script>